<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="background:#000;"></canvas>
    <br />
    画笔颜色：<input type="color" id="color" /><br />
    背景颜色：<input type="color" id="background" /><br />
    画笔粗细：<input type="number" id="size" min="4" value="4" /><br />
    <button id="save">保存为图片</button>
</body>
</html>
<script>
    //获取到canvas元素
    var canvas = document.getElementById('canvas')

    ///设置canvas宽和高
    canvas.width = 500
    canvas.height = 500

    //构建一个2d绘画工作台
    var ctx = canvas.getContext('2d');
    
    //初始化一些全局变量
    var color = '#fff'; //笔的颜色
    var background = '#000'; //背景颜色
    var size = 10; //线的粗细
    var startx = starty = 0 //起始点坐标
    var run = false //false没有在绘画  true有在绘画

    //给画布绑定事件
    canvas.addEventListener('mousedown', down)
    canvas.addEventListener('mouseup', up)
    canvas.addEventListener('mousemove', move)

    //鼠标按下
    function down(e)
    {
        //修改绘画状态
        run = true

        startx = e.pageX - 10
        starty = e.pageY - 10    
    }

    //弹起
    function up()
    {
        //不绘画
        run = false
    }

    //移动
    function move(e)
    {
        //如果run变量为true 说明是绘画 false不绘画
        if(run)
        {
            //绘画的坐标点保留下来 局部变量
            var endx = e.pageX - 10
            var endy = e.pageY - 10

            //开始绘画
            ctx.beginPath()
                //stroke 笔的线条类属性
                ctx.strokeStyle = color  //线的颜色
                ctx.lineWidth = size //线的粗细
                ctx.lineCap = 'round' //线头的形状 直线 圆角
                ctx.moveTo(startx, starty) //定义起点
                ctx.lineTo(endx, endy) //定义结束点
                ctx.stroke() //动作 连线
            ctx.closePath()
            //结束绘画

            //结束点将作为下一次的起点
            startx = endx
            starty = endy
        }
    }


    document.getElementById('color').addEventListener('change', function(){
        color = this.value
    })

    document.getElementById('size').addEventListener('change', function(){
        var num = this.value

        if(num <= 4)
        {
            num = 4
        }

        size = num
    })

    document.getElementById('background').addEventListener('change', function(){
        background = this.value

        canvas.style.background = background
    })


    //保存图片
    document.getElementById('save').addEventListener('click', function(){
        //创建一个用于放背景颜色的新画布
        var canvas2 = document.createElement('canvas')

        canvas2.width = canvas.width
        canvas2.height = canvas.height

        //构建画布
        var ctx2 = canvas2.getContext('2d')


        //拿到原画布的绘画的内容
        var data = ctx.getImageData(0, 0, canvas.width, canvas.height)

        //覆盖到另一个新的画布上
        ctx2.putImageData(data, 0, 0)

        //设置合成操作
        // 在源图像(新建的)上方显示目标图像(绘画 因为绘画的背景是透明的 所以直接透过去看到下方的背景色)
        ctx2.globalCompositeOperation = 'destination-over'

        //stroke 划线
        //fill 填充
        ctx2.fillStyle = background
        //填充矩形
        ctx2.fillRect(0, 0, canvas2.width, canvas2.height)


        //将canvas画布生成一个url地址
        var url = canvas2.toDataURL()

        //创建a连接，模拟点击下载
        var a = document.createElement('a')

        a.href = url
        a.download = 'photo.png'
        a.innerHTML = '下载连接'

        // document.body.append(canvas2)

        a.click()
        a.remove()
    })

</script>